<!doctype html>  
<!--[if IE 6]>
<html id="ie6" class="is_ie">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" class="is_ie">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" class="is_ie">
<![endif]-->
<!--[if IE 9]>
<html id="ie9" class="is_ie">
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html>
<!--<![endif]-->
<head>
	<title>TEST WEB PAGE for media plugin</title>  
	<meta charset="utf-8"/>
	<meta description="It would be very helpful if you can send me a good, simple HTML page with some JavaScript that demonstrates the player and record player usage. All of the above I’ve extracted from camera’s own web UI and they work fine in 3.0.0.3."/>
	<meta author="if you want to know more,please send a mail for technical support.">
	<meta version="0.0.1">
	<link rel="stylesheet" type="text/css" href="main.css">	
</head>
<body>
	<h1>plugin demo for important clientele</h1>
	<div class="fn-fl" id="ocx_wrap">
		<!-- 大华Plugin -->
		<div class="mart-20">
			<div style=" width:400px; height:20px;">大华控件播放</div>
			<object id="ocx" type="application/media-plugin-version-3.0.0.3" width="400" height="300" style="background-color:#000000">
			</object>
			<div style="width:400px; height:20px; background:grey;"><div id="localPlayTime" style="width:0;height:20px; background:#000;"></div></div>
			<a href='webplugin.exe' id="downOCX">安装插件</a>
		</div>
		<div class="mart-20" id="VLC">
			
		</div>
		
		<div class="mart-20" id="quicktime">
			
		</div>
	
	</div>
	<div class="fn-fl fn-w800">
		<ul>
			<li class="fn-hide">
				<input type="button" name="check" value="check plugin" onclick="plugin.checkPlugin()"> 
				<span>wheather plugin has installed correctly or not</span>
			</li>
			<li>
				<input type="button" name="login" value="login plugin" onclick="plugin.login(0)"> 
				<span class="importent">step 1: you must login the device  before do anything.</span>
			</li>
			<li>
				<input type="button" name="login" value="logout plugin" onclick="plugin.login(1)"> 
				<span>step last: you need logout the device after all works.</span>
			</li>
		</ul>
		<div id="operations" class="fn-hide">
			<ol>
				<li>
					<input type="button" name="connect" value="open" onclick="plugin.connect(true)"> 
					<span>step 2: connect to videoSource to see the video.you can set preview mode before open video.<span class="importent">you must open the video</span> before clasing some function.</span>
				</li>
				<li>
					<input type="button" name="connect" value="close" onclick="plugin.connect(false)"> 
					<span>step 2.1: disconnect from the videoSource when you don't need to see the video.</span>
				</li>
				<li>
					<input type="button" name="mode" value="preview mode" onclick="plugin.setMode(0)"> 
					<input type="button" name="mode" value="setting mode" onclick="plugin.setMode(1)"> 
					<span>step 3: change mode if you need.</span>
				</li>
				<li>
					<input type="button" name="connect" value="set devide mode" onclick="plugin.setDevideMode()" disabled="disabled"> 
					<span>invalid!</span>
				</li>
				<li>
					<input type="button" name="path" value="set path" onclick="plugin.path('c:\\video')">
					<span>set path first then you can get path--->'c:\video'</span>
				</li>	
				<li>
					<input type="button" name="path" value="get path" onclick="plugin.path('')">
					<span>path now in the plugin is---></span><input type="text" id="pathGet" ><span></span>
				</li>
				<li>
					<input type="text" id="pathChoose" onclick="plugin.pathDialog()">
					<span>click this input to choose a floder</span>
				</li>
				<li>
					<input type="button" name="mode" value="start talk" onclick="plugin.talk(1)"> 
					<input type="button" name="mode" value="stop talk" onclick="plugin.talk(0)"> 
					<span>step +: start talk or stop talk.</span>
				</li>
				<li>
					<input type="button" name="mode" value="start largen part" onclick="plugin.control(5,1)"> 
					<input type="button" name="mode" value="stop largen part" onclick="plugin.control(5,0)"> 
					<span>step +:mouse down and move on the plguin ater start this function</span>
				</li>
				<li>
					<input type="button" name="audio" value="start audio" onclick="plugin.control(1,1)"> 
					<input type="button" name="audio" value="stop audio" onclick="plugin.control(1,0)"> 
					<span>step +:i don't konw this function clearly.</span>
				</li>
				<li>
					<input type="button" name="getPicSize" value="GetPicSize()" onclick="plugin.getPicSize()">
					<span id="GetPicSizeSpan">GetPicSize()--></span>
				</li>
				<li>
					<select id="videoFormat">
						<option value="1">dav</option>
						<option value="2">avi</option>
						<option value="3">asf</option>
					</select>
					<input type="button" name="record" value="start recording" onclick="plugin.record(true)">
					<input type="button" name="record" value="stop recording" onclick="plugin.record(false)">
					<span>choose a video format then start recording,you can see the video recored at 'c:\video'</span>
					</br>
					<span>Recording time:</span>
					<span id="record_time"></span>
				</li>
				<li>
					<input type="button" name="getPlayTime" value="get Playtime" onclick="plugin.getPlayTime()"> 
					<span>get time every seconds,close video to see time changes.<span id="getPlayTime"></span></span>
					
				</li>
				<li>
					<input type="button" name="path" value="get local path" onclick="plugin.getloaclPath()">
					<span>local path now in the plugin is---></span><input type="text" id="localpathGet" ><span></span></br>
					<input type="button" name="mode" value="play local" onclick="plugin.localPlayback(0)"> 
					<input type="button" name="mode" value="stop local" onclick="plugin.localPlayback(1)"> 
					<span></span>
					
				</li>
                <li>
                    <input type="button" name="getPicBase64" value="get pic Base64" onclick="plugin.getPicBase64()"> 
                    
                </li>
                <li>
                    <input type="button" name="snap" value="snap" onclick="plugin.snap()"> 
                    
                </li>	
                <li>
                    <input type="button" name="snap not open pic" value="snap not open pic" onclick="plugin.snapNotOpenPic()"> 
                    <span>get pic in local path, but not open the pic.<span id="getPlayTime"></span></span>
                </li>
			</ol>
			<hr>
			<h2>play back</h2>
			<ol>
				<li>
					<input type="button" name="setModuleMode" value="Set Playback Mode" onclick="plugin.setMode(3)"> 
					<span>Set Playback Mode  before anything about playback.</span>
				</li>
				<li>
					<input type="button" name="stopPlayBack" value="Stop Playback" onclick="plugin.stopPlayBack()"> 
					<span>Stop Playback</span>
				</li>
				<li>
					<input type="button" name="playSetVolume" value="Play Set Volume" onclick="plugin.playSetVolume(-50)"> 
					<span>voice range : [-100,0]</span>
				</li>
				<li>
					<input type="button" name="playBackByRecordFileEx" value="Playback By Record File" onclick="plugin.playBackByRecordFileEx()">
					<span>as you konw.</span>
				</li>
				<li>
					<input type="button" name="PlayOpenSound" value="Play Open Sound" onclick="plugin.playOpenSound()"> 
					<span>Enable or not, switch</span>
				</li>
			</ol>
		</div>
		<div class="fn-fl fn-w200" id="ptzContent"  style="display:none">
		<!--云台调节-->
        <div id="ptz_control" class="main-ptz fn-clear" style="">
            <div id="pev_cot" class="main-ptz-container">
                <div class="main-ptz-top fn-border-radius">
                    <ul id="dir_control_nav" class="main-ptz-advance-nav fn-border-top-radius fn-marb10">
                        <li id="p_visualPtz" class="fn-border-top-radius main-ptz-advance-nav-current" data-tab-nav="vPtz">PTZ Control</li>
                        <li id="p_visualRock" class="fn-border-top-radius fn-hide" data-tab-nav="vRock">Joystick</li>
                    </ul>
                    <div id="yt" class="ui-ptz-iconbox fn-padt10" data-tab-content="vPtz">
                        <a id="yt1" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="LeftUp">
                            <i class="ui-ptz-icon-leftup"></i>
                        </a>
                        <a id="yt2" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="Up">
                            <i class="ui-ptz-icon-up"></i>
                        </a>
                        <a id="yt3" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="RightUp">
                            <i class="ui-ptz-icon-rightup"></i>
                        </a>
                        <a id="yt4" class="ui-ptz-icon ptzControl" href="javascript:;"  data-direction="Left">
                            <i class="ui-ptz-icon-left"></i>
                        </a>
                        <a id="yt5" class="ui-ptz-icon ui-ptz-specail-icon" href="javascript:;">
                            <i class="ui-ptz-icon-center"></i>
                        </a>
                        <a id="yt6" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="Right">
                            <i class="ui-ptz-icon-right"></i>
                        </a>
                        <a id="yt7" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="LeftDown">
                            <i class="ui-ptz-icon-leftdown"></i>
                        </a>
                        <a id="yt8" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="Down">
                            <i class="ui-ptz-icon-down"></i>
                        </a>
                        <a id="yt9" class="ui-ptz-icon ptzControl" href="javascript:;" data-direction="RightDown">
                            <i class="ui-ptz-icon-rightdown"></i>
                        </a>
                    </div>
                    <div id="visualRock" class="fn-hide vR-wrap" data-tab-content="vRock">
                        <div id="vR_area" class="vR-area">
                            <div id="vR_contorl" class="vR-control"></div>
                        </div>
                    </div>                                          
                    <div id="bc" class="main-ptz-step" data-tab-content="vPtz">
                        <span id="">Speed(1-8):</span>
                        <select id="ps" class="fn-width40">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5" selected>5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                        </select>
                    </div>
                    <div id="tiaojie" class="main-ptz-adjust">
                        <div id="ptz_bb_wrap" class="ui-ptz-adjust-item fn-clear">
                            <a id="b_bb2" class="ui-ptz-icon" href="javascript:;" data-direction="ZoomWide">
                                <i class="ui-ptz-icon-less"></i>
                            </a>                                                    
                            <label id="" class="ui-ptz-adjust-text">Zoom</label>
                            <a id="b_bb1" class="ui-ptz-icon" href="javascript:;" data-direction="ZoomTele">
                                <i class="ui-ptz-icon-more"></i>
                            </a>
                        </div>
                        <div id="ptz_bj_wrap" class="ui-ptz-adjust-item fn-clear">
                            <a id="b_bj2" class="ui-ptz-icon" href="javascript:;" data-direction="FocusFar">
                                <i class="ui-ptz-icon-less"></i>
                            </a>                                                    
                            <label id="" class="ui-ptz-adjust-text">Focus</label>
                            <a id="b_bj1" class="ui-ptz-icon" href="javascript:;" data-direction="FocusNear">
                                <i class="ui-ptz-icon-more"></i>
                            </a>
                        </div>
                        <div id="ptz_gq_wrap" class="ui-ptz-adjust-item fn-clear">
                            <a id="b_gq2" class="ui-ptz-icon" href="javascript:;" data-direction="IrisSmall">
                                <i class="ui-ptz-icon-less"></i>
                            </a>                                                    
                            <label id="" class="ui-ptz-adjust-text">Iris</label>
                            <a id="b_gq1" class="ui-ptz-icon" href="javascript:;" data-direction="IrisLarge">
                                <i class="ui-ptz-icon-more"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
		<form class="ui-form fn-clear" id="encodeContent" style="display:none">
            <!--Main Stream-->
            <div class="ui-half-box">
                <div class="ui-form-item fn-clear">
                    <label class="ui-title" t="">Main Stream</label>
                </div>
                <div class="fn-blank"></div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Code-Stream Type</label>
                    <select class="ui-select" id="video_streamType0"></select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Encode Mode</label>
                    <select class="ui-select" id="video_compression0">
                        <option value="1"></option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Resolution</label>
                    <select class="ui-select" id="video_resolution0"></select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Frame rate(FPS)</label>
                    <select class="ui-select" id="video_fps0"></select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Bit Rate Type</label>
                    <select class="ui-select" id="video_bitctrl0">
                        <option value="CBR" t="w_CBR">CBR</option>
                        <option value="VBR" t="w_VBR">VBR</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear" id="video_showQuality0" style="display:none;">
                    <label class="ui-label fn-padl20" t=" Quality">Quality</label>
                    <select class="ui-select" id="video_quality0">
                        <option value="1" t="w_Worst">1</option>
                        <option value="2" t="w_Worse">2</option>
                        <option value="3" t="w_Bad">3</option>
                        <option value="4" t="w_Good">4</option>
                        <option value="5" t="w_Better">5</option>
                        <option value="6" t="w_Best">6(Best)</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Reference Bit Rate</label>
                    <span class="ui-text" id="video_bitrefer0"></span>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Bit Rate</label>
                    <div class="fn-left">
                        <select class="ui-select" id="video_bitrate0">
                            <option value="1"></option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>
                <div id="video_customwrap0" class="ui-form-item fn-clear" style="display:none;">
                    <input id="video_custom0" class="ui-input fn-marl140"/>
                </div>
                <div class="ui-form-item fn-clear"  id="video_showGop0">
                    <label class="ui-label fn-padl20" id="video_gop0_label" t="GOP">I Frame Interval</label>
                    <div class="fn-left fn-width230">
                        <input id="video_gop0" class="ui-input"/>
                        <span class="ui-text" id="video_gop0_range">(1~150)</span>
                    </div>
                </div>
            </div>
            <!--Sub Stream-->
            <div id="video_subStream_con" class="ui-half-box">
                <div class="ui-form-item fn-clear">
                    <label class="ui-title" t="">Sub Stream</label>
                </div>
                <div class="ui-form-item fn-clear">
                   
                    <div class="ui-checkbox">
                        <input type="checkbox" style="width:14px;" id="video_subStream_enable"/>
                    </div>
                    <label class="ui-label" for="video_subStream_enable" t="">Enable</label>
                    <select class="ui-select" id="video_extraAudioList" style="display:none;"></select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Code-Stream Type</label>
                    <select class="ui-select" id="video_streamType1">
                        <option value="1" t="">General</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Encode Mode</label>
                    <select class="ui-select" id="video_compression1">
                        <option value="1"></option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Resolution</label>
                    <select class="ui-select" id="video_resolution1">
                        <option value="1"></option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Frame rate(FPS)</label>
                    <select class="ui-select" id="video_fps1">
                        <option value="1"></option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Bit Rate Type</label>
                    <select class="ui-select" id="video_bitctrl1">
                        <option value="CBR" t="w_CBR">CBR</option>
                        <option value="VBR" t="w_VBR">VBR</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear" id="video_showQuality1" style="display:none;">
                    <label class="ui-label fn-padl20" t="">Quality</label>
                    <select class="ui-select" id="video_quality1">
                        <option value="1" t="w_Worst">1</option>
                        <option value="2" t="w_Worse">2</option>
                        <option value="3" t="w_Bad">3</option>
                        <option value="4" t="w_Good">4</option>
                        <option value="5" t="w_Better">5</option>
                        <option value="6" t="w_Best">6(Best)</option>
                    </select>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Reference Bit Rate</label>
                    <div class="ui-text" id="video_bitrefer1"></div>
                </div>
                <div class="ui-form-item fn-clear">
                    <label class="ui-label fn-padl20" t="">Bit Rate</label>
                    <div class="fn-left fn-width200">
                        <select class="ui-select" id="video_bitrate1">
                            <option value="1"></option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>
                <div class="ui-form-item" id="video_customwrap1">
                    <input id="video_custom1" class="ui-input fn-marl140"/>
                </div>
                <div class="ui-form-item fn-clear" id="video_showGop1">
                    <label class="ui-label fn-padl20" t="">I Frame Interval</label>
                    <div class="fn-left fn-width230">
                        <input id="video_gop1" class="ui-input"/>
                        <span class="ui-text" id="video_gop1_range">(1~150)</span>
                    </div>
                </div>

            </div>
			<div style="float:left; margin-top:50px;width:400px;">
	            <div class="ui-button-box fn-marl160" style="">
		            <input type="button" name="login" value="Save" id="video_encode_confirm"> 
		        </div>
	            <div class="ui-tip fn-marl160">
		            <div class="ui-tip-container" id="video_remark0">
		                <span class="ui-tip-icon"></span>
		                <label  id="video_remark0_label">保存成功</label>
		            </div>
		        </div>
	        </div>
	        </br>
	        </br>
	        </br>
	        </br>
	        </br>
        </form>
	</div>
</body>
<script src="m.js"></script>
<script src="more.js"></script>
<script src="index.js"></script>
</html>